<script type="text/javascript">
    $(function () {
        $("#month-selection option[selected]").removeAttr("selected");
        $("#month-selection option[value='{{ selectedMonthAndYear }}']").attr("selected", "selected");

        $("#month-selection").change(function() {
            changeContent("/timesheet/new/" + $("#month-selection option:selected").val() + "/");
        });

        $("#customer-selection option[value='{{ selectedCustomer }}']").attr("selected", "selected");
    });

    function setTotalHours() {
        totalHours = 0;
        $(".in-invoice input").each(function() {
            totalHours = totalHours + Number($(this).val());
        })
        $("#total-hours").html(totalHours);
    }

    function serializeData() {
        var timesheet = new Object();
        timesheet.id = $("#timesheet-id").text();
        timesheet.customer = $("#customer-selection option:selected").val();
        timesheet.contract = $("#contract-selection option:selected").val();
        timesheet.project = $("#project-value").val();
        timesheet.consultant = $("#consultant-value").val();
        timesheet.manager = $("#project-manager-value").val();
        timesheet.days = new Array();
        $(".in-invoice").each(function(index) {
            var weekDay = new Object();
            var day = $(this).children("p:first").html().substring(0, 2);
            var month = $(this).children("p:first").html().substring(3, 5);
            weekDay.date = "{{ year }}-" + month + "-" + day
            weekDay.workedStdHours = $(this).children("p:last").children("input:first").val();

            if ($(this).hasClass('saturday') || $(this).hasClass('sunday')) {
                weekDay.weekend = true;
            }

            timesheet.days.push(weekDay);
        });
        return timesheet;
    }

    function submit() {
        $.postJSON("/timesheet/save/", serializeData(), function(data) {
            if ('message' in data) {
                displayError(data.message.text);
            } else {
                changeContent(data.redirect);
            }
        }, "json");
    }

    activateMenuTimesheet();
    activateSubMenuNew();

    {% if error_msg %}
        displayError({{ error_msg }})
    {% endif %}
</script>

<div id="timesheet">
    <div id="timesheet-id">{{ timesheet_id }}</div>
    <div id="timesheet-header-data">
        <div class="field-line">
            <div class="label">Month</div>
            <div class="value">
                <select id="month-selection">
                    {% for month_key,month_value in availableMonths.items %}
                        {% if month_key == selectedMonthAndYear %}
                            <option value="{{ month_key }}" selected="true">{{ month_value }}</option>
                        {% else %}
                            <option value="{{ month_key }}" selected="false">{{ month_value }}</option>
                        {% endif %}
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="field-line">
            <div class="label-value">
                <div class="label">Consultant</div>
                <div class="value"><input type="text" id="consultant-value" size="30" value="{{ consultant }}">
                </div>
            </div>
        </div>
        <div class="field-line">
            <div class="label-value">
                <div class="label">Contract</div>
                <div class="value">
                    <select id="contract-selection">
                        {% for contract_key, contract_value in contracts.items %}
                            {% if contract_value == selectedContract %}
                                <option value="{{ contract_value}}" selected="true">{{ contract_key }}</option>
                            {% else %}
                                <option value="{{ contract_value}}" selected="false">{{ contract_key }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>
        <div class="field-line">
            <div class="label-value">
                <div class="label">Project</div>
                <div class="value"><input type="text" id="project-value" size="30" value="{{ project }}"></div>
            </div>
        </div>
        <div class="field-line">
            <div class="label-value">
                <div class="label">Project Manager</div>
                <div class="value"><input type="text" id="project-manager-value" size="30" value="{{ manager }}">
                </div>
            </div>
        </div>
    </div>
    <div id="timesheet-days">
        {% for day in days %}
            {% if day.part_of_invoice %}
                {% if day.weekday == 'saturday' %}
                    <div class="day in-invoice saturday">
                {% endif %}
                {% if day.weekday == 'sunday' %}
                    <div class="day in-invoice sunday">
                {% endif %}
                {% if day.weekday != 'saturday' and day.weekday != 'sunday' %}
                    {% if day.holiday %}
                        <div class="day in-invoice holiday">
                    {% else %}
                        <div class="day in-invoice">
                    {% endif %}
                {% endif %}
            {% else %}
                <div class="day out-of-invoice">
            {% endif %}
        <p>{{ day.date }}</p>
        <p>
            {% if day.part_of_invoice %}
                <input type="text" size="5" value="{{ day.worked_hours }}"/>
            {% else %}
                &nbsp;
            {% endif %}
        </p>
        </div>
        {% endfor %}
        </div>



        </div>

        <div id="actions">
            <button class="action" id="submit">Submit</button>
            {% if timesheet_id %}
            <button class="action" id="cancel">Cancel</button>
            {% endif %}
        </div>

        <div id="hours-count">
            <p>Total Hours</p>

            <p id="total-hours">Not Set</p>
        </div>





        <script type="text/javascript">
            $("#submit").click(submit);
            {% if timesheet_id %}
                $("#cancel").click(function() {
                    changeContent("/timesheet/view/{{ timesheet_id }}/");
                });
            {% endif %}

            $("#customer-selection").change(function() {
                $("#contract-selection option[selected]").removeAttr("selected");
            });

            $("#contract-selection").change(function() {
                $("#customer-selection option[selected]").removeAttr("selected");
            });

            $(".in-invoice input").change(function() {
                setTotalHours();
            });

            setTotalHours();
        </script>